<!-- 用户列表 userList -->
<template>
	<div class="backwarp">
		<el-container>
			<el-header><Header></Header></el-header>
			<el-container style="padding: 60px 0;">
				<el-aside width="240px" style="padding-bottom: 120px;"><BackNavList></BackNavList></el-aside>
				<el-main>
					<div class="elMain">
						<div class="topCont">
							<span>用户列表</span>
							<el-button type="primary" @click="userAdd">新增</el-button>
						</div>
						<div class="sheetCard">
							<el-table :data="userList" stripe style="width: 100%" highlight-current-row >
								<el-table-column fixed prop="Id" label="ID" width="100"></el-table-column>
								<el-table-column prop="name" label="用户名" width="260"></el-table-column>
								<el-table-column prop="email" label="邮箱" width="260"></el-table-column>
								<el-table-column prop="pass" label="密码" width="260">********</el-table-column>
								<el-table-column fixed="right" label="操作" width="260">
									<template slot-scope="scope">
										<el-button @click="editUserClick(scope.row)" type="primary" size="small" round>编辑</el-button>
										<el-button @click="deleteUserClick(scope.row.Id)" type="danger" size="small" round>删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</el-main>
			</el-container>
			<el-footer><a href="https://beian.miit.gov.cn">陇ICP备2021000907号-2</a></el-footer>
		</el-container>
		<!-- 弹窗____编辑 -->
		<el-dialog title="用户信息--编辑" :visible.sync="DialogVisible" class="userArr">
			<el-form :model="userArr" status-icon size="mini" :rules="userRul" ref="userArr">
				<el-form-item label="用户名" :label-width="formLabelWidth">
					<el-input v-model="userArr.name"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
					<el-input v-model="userArr.email"></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth" prop="pass">
					<el-input v-model="userArr.pass"></el-input>
				</el-form-item>
				<el-form-item class="dialog-footer" style="margin-bottom: 0;">
					<el-button type="primary" @click="submitUserForm('userArr')" style="float: right;margin-bottom: 0;">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import Header from '../../components/back/header.vue'
	import BackNavList from '../../components/back/backNavList.vue'
	export default {
		name: 'userList',
		data() {
			var Email = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('邮箱不能为空'));
				}
				setTimeout(() => {
					var emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
					if (!emailReg.test(value)) {
						callback(new Error('请注意邮箱格式'));
					} else {
						callback();
					}
				}, 500);
			};
			var Pass = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('密码不能为空'));
				}
				setTimeout(() => {
					if (value.length !== 8) {
						callback(new Error('密码长度为8'));
					} else {
						callback();
					}
				}, 500);
			};
			return {
				userList:[],
				userArr:{
					Id:'',
					userName:'',
					email:'',
					password:'',
					pass:''
				},
				userRul: {
					email: {validator:Email},
					pass: {validator:Pass}
				},
				formLabelWidth: '120px',
				DialogVisible: false,
			}
		},
		mounted() {this.getPullUser();},
		methods: {
			getPullUser(){	// 用户列表请求
				this.$axios.post(this.HOST + '/api/pullUser').then(res => {
					this.userList = res.data.data
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			pageReload(){
				this.userList=[];
				this.getPullUser();
			},
			deleteUserClick(row) { // 彻底删除
				this.$axios.post(this.HOST + '/api/deleteUser', {
					Id: row,
				}).then(res => {
					this.$message({message: '已成功删除',type: 'success'});
					console.log('提交成功', res.data)
					this.pageReload();
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			// 编辑
			editUserClick(e){this.userArr = e;this.DialogVisible = true;},
			//  新增
			userAdd(){this.DialogVisible = true;},
			submitUserForm(formName) {	// 编辑弹窗--确定按钮
				this.DialogVisible = false;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post(this.HOST + '/api/editAddUser', {
							Id: this.userArr.Id,
							name: this.userArr.userName,
							email: this.userArr.email,
							password: this.$md5(this.userArr.pass)
						}).then(res => {
							console.log(res.data,'33')
							console.log('this.userArr',this.userArr)
							this.$message({message: '修改成功',type: 'success'});
						}).catch(err => {
							console.log(err, ' catch ')
						});
					}
				})
			},
		},
		components: {
			Header: Header,
			BackNavList: BackNavList
		}
	}
</script>

<style>
	@import url("../../assets/css/backStyle.css");
	.backwarp .el-header {padding: 0;position: fixed;width: 100%;z-index: 9999;}
	.userArr .el-dialog {width: 460px;border-radius: 8px;padding-right: 30px;}
</style>
